//默认页 和默认每页显示的商品数
let page = 1;
let line = 16;
//获取浏览器地址栏的数据对象(调用tool里面的函数来获取)
let obj = myGetUrlValObj();
console.log(obj); //{id='列表名称'}

//封装函数 根据得到的地址栏数据 动态渲染生成页面
setPage();
function setPage() {
  //发送ajax请求 携带的参数是obj.cat_id
  const xhr = myPromiseJQueryAjax(
    "../server/goods_list.php",
    "get",
    {
      cat_one_id: obj.id,
      page: page,
      line,
    },
    "json"
  );
  console.log(xhr);
  //返回请求解果 动态生成页面
  xhr.then(function (res) {
    console.log(res);
    let str = "";
    //遍历res里面data对象动态获取数据生成页面
    res.data.forEach(function (item) {
      setRGB();
      str += `<li style="border-top:2px solid ${setRGB()}">
          <div class="info_name">
            <a href="#" class="first_name">${item.cat_one_id}</a>
            <a href="#" class="second_name">${item.cat_two_id}</a>
            <a href="#" class="thired_name">${item.cat_three_id}</a>
          </div>
          <a href="./detail2.html?id=${item.goods_id}" class="details">
            <div class="imgBox">
                <img src="${item.goods_big_logo}" alt="..."></div>
            <div class="info">
                 <h3>${item.goods_name}</h3>
            </div>
            <div class="price">
                <span>￥ ${item.goods_price}</span>
            </div>
            <span class="more_like">找相似</span>
          </a>
        </li>`;
    });
    //将str的值写入ul标签
    $(".container ul").html(str);

    //分页插件程序定义在响应体程序中
    $(".box").pagination({
      pageCount: res.sumPage, //总页数
      totalData: res.row, //数据总数量
      current: res.page, //当前第几页
      showData: res.line, //每页数据数量
      prevCls: "prev", // 上一页类名
      nextCls: "next", // 下一页类名
      prevContent: "上一页", // 上一页内容
      nextContent: "下一页", // 下一页内容
      activeCls: "active", // 选中页 class类名
      mode: "fixed", // 显示分页按钮 为 固定模式状态
      count: 4, // 分页按钮 显示的数量 不算 选中页 也就是 设定4 一共显示 5个按钮
      coping: true, // 显示 首页 末页
      homePage: "首页", // 设定首页内容
      endPage: "末页", // 设定末页内容
      isHide: true, // 总页数 为 0 或者 1 隐藏 分页控件
      keepShowPN: true, // 显示 上一页 下一页
      jump: true, // 开启 跳转
      callback: function (result) {
        //获取分页插件点击之后的页数
        //参数.getCurrent();当前页的页码
        console.log(result.getCurrent());
        //将结果赋值给page变量存储
        page = result.getCurrent();
        //根据新的page数据 再次发送请求 动态渲染生成新的页面
        setPage();
      },
    });
  });
}
